<template>
  <div class="app-container">
    <el-row >
      <el-menu style="height:50px" @select="handleSelect" class="el-menu-demo" text-color="#777" mode="horizontal">
        <el-submenu index="3">
          <template slot="title"><i class="fa fa-file-excel-o"></i> 导出</template>
          <!--
          <el-menu-item index="html">HTML</el-menu-item>
          -->
          <el-menu-item index="csv">CSV</el-menu-item>
          <el-menu-item index="excel">EXCEL</el-menu-item>
          <el-menu-item index="word">WORD</el-menu-item>
          <el-menu-item index="pdf">PDF</el-menu-item>
        </el-submenu>
        <el-menu-item index="4"><i class="fa fa-print"></i> 打印</el-menu-item>
      </el-menu>
    </el-row>
    <!-- 参数区域 -->
    <el-row style="margin-top:15px">
      <portal-param-view ref="paramViewForm" :showSearchBtn="true" :pms="pms"></portal-param-view>
    </el-row>
    <!-- 组件区域 -->
    <layout-view ref="optarea" :pageInfo="pageInfo"></layout-view>

  </div>
</template>
<script>
import request from "@/utils/request"
import { Loading } from 'element-ui'
import LayoutView from './LayoutView.vue'
import PortalParamView from './PortalParamView.vue'
import * as utils from '@/views/bi/portal/Utils'

export default {
  name: "portalMain",
  components: {
    LayoutView,
    PortalParamView
  },
  props: {

  },
  data() {
    return {
      reportId:null,
      pageInfo:{},
      pms:[]
    }
  },

  methods: {
    handleSelect(key, keyPath){
      if(key === '4'){  //打印
        let p = this.$refs['paramViewForm'].getParamValues();
        p.id = this.reportId;  //参数
        let routeData = this.$router.resolve({path:"/portal/Print", query:p});
        window.open(routeData.href, '_blank');
      }else if(key === 'html' || key === 'csv' || key === 'excel' || key === 'pdf' || key === 'word'){  //导出
        this.exportReport(key);
      }
    },
    getCfg(){
      request({
        url:"/bi/portal/get",
        params:{pageId:this.reportId},
        method:"get",
      }).then(resp=>{
        this.pageInfo = JSON.parse(resp.rows);
        this.getReport();
      });
    },
    getReport(){
      let loadingInstance = Loading.service({fullscreen:false, target:document.querySelector('.wrapper-content-nomargin')});
      request({
        url:"/bi/portal/view",
        method:"GET",
        params:{pageId:this.reportId},
      }).then(resp=>{
        //渲染组件
        this.$refs['optarea'].setCompData(resp.rows);
        this.pms = resp.rows.pms;
      }).catch(e=>{
        this.$notify.error(e)
      });
      loadingInstance.close();
    },
    exportReport(tp){
      let paramViewForm = this.$refs['paramViewForm'];;
      utils.exportReport(tp, this.reportId, paramViewForm, this.pageInfo);
    }
  },
  mounted(){
    this.reportId = this.$route.query.id;
    this.reportId = "84473cd41e3a4d8493f06988e5790f08";
    //this.getCfg();
  },
  computed:{
    getReportId:function(){
      return this.reportId;
    }
  },
  watch: {
    getReportId:{  //监控参数变化
      handler(val){
        this.reportId = val;
        if(val){
          this.getCfg();
        }
      },
      immediate: true
    }
  },
  /**
   beforeRouteLeave: function(to, from, next) {
    this.$destroy();
    next();
  }
   */
}
</script>

